function draw_box_corr(data) {
	
	max = d3.max(data.map(function(reps){return d3.max(reps.map(function(d){return d3.max(d[1]);}))}))
	min = d3.min(data.map(function(reps){return d3.min(reps.map(function(d){return d3.min(d[1]);}))}))
	
	//min = d3.min(data.map(function(d){return d3.min(d[1]);}))
	//max = d3.min(data.map(function(d){return d3.min(d[1]);}))
	
 

	var chart = d3.box()
		.whiskers(iqr(1.5))
		.height(height)	
		.domain([min, max])
		.showLabels(labels);


	var svg_parent = d3.select("body").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height*2.5 + margin.top*2 + margin.bottom)
		.attr("class", "box")    
	var svg = svg_parent
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var corr_all_plot = svg_parent.append("g").attr("id", "corrplot").attr("transform", 
		"translate(" + margin.left + "," + (margin.top*2+margin.bottom+height) + ")");

	
	// axes for the box plot
	// the x-axis
	var x = d3.scale.ordinal()	   
		.domain(
				data.map(function(reps) { return reps.map(function(d){return d[0]}) } )
			        .reduce(function(a,b){return a.concat(b)})	
		       )	    
		.rangeRoundBands([0 , width], 0.7, 0.3); 		

	var xAxis = d3.svg.axis()
		.scale(x)
		.orient("bottom");

	// the y-axis
	var y = d3.scale.linear()
		.domain([min, max])
		.range([height + margin.top, 0 + margin.top]);
	
	var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");



	// axes for the corr plot
	// the x-axis

	x_plate_names = data.map(function(reps) { 
		l=reps[1][0].length
		return reps[0][0]+'&'+reps[1][0][l-1] } )
	corrs = data.map(function(d){return d[0][3]})
	pvals = data.map(function(d){return d[0][4]})
	var x_corr = d3.scale.ordinal()	   
		.domain(
		x_plate_names
		       )	    
		.rangeRoundBands([0 , width], 0.7, 0.3); 		
	
	var sci = d3.format(".1e");
	var y0 = d3.scale.linear()
		.domain([d3.min(corrs)*0.9, 1])
		.range([height, 0]);

	y1_min=Math.log(d3.min(pvals.filter(function(d){return d!=0})));
	y1_max=Math.log(d3.max(pvals));
	var y1 = d3.scale.linear()
		.domain([y1_max, y1_min])
		.range([height, 0]);


	var corr_xAxis = d3.svg.axis()
		.scale(x_corr)
		.orient("bottom");

	var yAxisLeft = d3.svg.axis().scale(y0)     
		    .orient("left").ticks(5);
	var yAxisRight = d3.svg.axis().scale(y1)  
		    .orient("right").ticks(5)
		    .tickFormat(function(d) {p=Math.exp(d); return sci(p)});



	// flatten the list of Data points group by platename i.e all replicates per plate
	data_flat = data.reduce(function(a,b){return a.concat(b)});
	
	// draw the boxplots	
	svg.selectAll(".box")	   
      .data(data_flat)
	  .enter().append("g")
		.attr("transform", function(d) { return "translate(" +  x(d[0])  + "," + margin.top + ")"; } )
      .call(chart.width(x.rangeBand())); 


// draw the dots
box_w=x.rangeBand()
for (i=0; i<data.length; i++)	{
	
	for(j=0; j<data[i].length; j++){
	xpos=data[i][j][0];
	index=i;
	offset = j
	  

	//############ Filter out NaN ############
	filtered=data[i][j][1].filter(function(d) {return d;})
	var arr_data = []
	for (c=0; c<filtered.length; c++){
		arr_data.push({'ind':index, 'dat':filtered[c]})
	}

	// offset the dots to make reps closer together
	if (offset==0){ dx=x.rangeBand()/2}
	else {dx=-x.rangeBand()/4}

	svg.selectAll(".dot").data(arr_data).enter()
	.append("circle")
	.attr("cy", function(d, i) { return y(d.dat);})
	.attr("cx", function(d, i) { return x(xpos) + box_w/2 + (Math.random()*2-1)*box_w/4 +dx;})
	.attr("r", 3)
	.attr("class", "pair"+index)
	.on("mouseover", function(d, i) {
	
		  tooltip.transition()
		       .duration(100)
		       .style("opacity", .9);
		  tooltip.html(data_labels[i]+"<br/> "+d.dat)
		       .style("left", (d3.event.pageX + 5) + "px")
		       .style("top", (d3.event.pageY - 28) + "px");
		
		nohighlight=".pair"+d.ind
		d3.selectAll(nohighlight)
		.attr("class", "highlighted");
		
	      })
	      .on("mouseout", function(d) {

		d3.selectAll('.highlighted')
		.attr("class", "pair"+d.ind);

		  tooltip.transition()
		       .duration(500)
		       .style("opacity", 0);
	     });
	      
	      
	}

}
	
// draw the dots for corrs and pvals
	corr_all_plot.selectAll(".dot").data(corrs).enter()
	.append("circle")
	.attr("cy", function(d, i) { return y0(d);})
	.attr("cx", function(d, i) { return x_corr(x_plate_names[i]);})
	.attr("r", 3)

	corr_all_plot.selectAll(".dot").data(pvals).enter()
	.append("circle")
	.attr("cy", function(d, i) { if(d==0){return y1_min}else{ return y1(Math.log(d));}})
	.attr("cx", function(d, i) { return x_corr(x_plate_names[i]);})
	.attr("r", 3).style("fill", "red")
	      
// add titles
	svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 + (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "18px") 
        .style("text-decoration", "underline")  
        .text("Grouped by replicates");
 
	 // draw y axis
	svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
		.append("text") // and text1
		  .attr("transform", "rotate(-90)")
		  .attr("y", 6)
		  .attr("dy", ".71em")
		  .style("text-anchor", "end")
		  .style("font-size", "12px") 
		  .text("Raw readout");		
	
	// draw x axis	
	svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height  + margin.top + 10) + ")")
        .call(xAxis)
	.selectAll("text")
    	.attr("y", 0)
    	.attr("x", 9)
    	.attr("dy", ".35em")
    	.attr("transform", "rotate(90)")
    	.style("text-anchor", "start");

	
	// draw x and y0, y1 axis 
	corr_all_plot.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height  + margin.top ) + ")")
        .call(corr_xAxis)
	.selectAll("text")
    	.attr("y", 0)
    	.attr("x", 9)
    	.attr("dy", ".35em")
    	.attr("transform", "rotate(90)")
    	.style("text-anchor", "start");

	corr_all_plot.append("g")
        .attr("class", "y axis")
        .style("fill", "steelblue")
        .call(yAxisLeft)
		.append("text")
		  .attr("transform", "rotate(-90)")
		  .attr("y", 6)
		  .attr("dy", ".71em")
		  .style("text-anchor", "end")
		  .style("font-size", "12px") 
		  .text("Pearson R between replicates");		
	 

    	corr_all_plot.append("g")             
        .attr("class", "y axis")    
        .attr("transform", "translate(" + width + " ,0)")   
        .style("fill", "red")       
        .call(yAxisRight)
		.append("text")
		  .attr("transform", "rotate(90)")
		  .attr("y", 6)
		  .attr("dy", ".71em")
		  .style("text-anchor", "start")
		  .style("font-size", "12px") 
		  .text("P value");		


}





// Returns a function to compute the interquartile range.
function iqr(k) {
  return function(d, i) {
    var q1 = d.quartiles[0],
        q3 = d.quartiles[2],
        iqr = (q3 - q1) * k,
        i = -1,
        j = d.length;
    while (d[++i] < q1 - iqr);
    while (d[--j] > q3 + iqr);
    return [i, j];
  };
}

